<template>
    <div class="feedback">
      <!-- 头部信息 -->
        <header>
			<div class="filter-part">
				<div class="filter-item">
					<fourLevelLinkage
						@changeProvince="changeProvince"
						@changeCity="changeCity"
						@changeArea="changeArea"
						@changeHospital="changeHospital"
						:province="province"
						:city="city"
						:area="area"
						:hospital="hospital"
					></fourLevelLinkage>
				</div>
				<div class="filter-item" v-if="feedbackType == 2">
					<Select class="w-select" clearable v-model="dictId" style="width:120px;" placeholder="科室">
						<Option
							v-for="item in deptmentList"
							:value="item.id"
							:key="item.dictType"
							style='text-align:center'
						>{{item.dictName}}</Option>
					</Select>
				</div>
				<div class="filter-item" v-if="feedbackType == 2">
					<Input
					v-model.trim="Name"
					placeholder="请输入医生姓名"
					style="width: 260px"
					clearable
					/>
				</div>
				<div class="filter-item">					
					<DatePicker type="daterange" v-model="filterObj.time" placement="bottom-end" placeholder="请选择日期" separator='至' style="width: 200px"></DatePicker>
				</div>
				<div class="filter-item" v-if="feedbackType">
                <Select class="w-select" v-model="feedbackType" style="width:120px;" placeholder="反馈类型" @on-change="changefeedbackType">
                    <Option
                        v-for="item in typeList"
                        :value="item.typeId"
                        :key="item.typeId"
                        style='text-align:center'
                    >{{item.typeName}}</Option>
                </Select>
            </div>
				<div class="filter-btn-group">
					<Button type="primary" style="width: 51px;height:32px" @click="handleSearch" icon="ios-search"></Button>
					<Button style="width: 51px;height:32px" @click="handleReset">
						<i class = "iconfont icon-gengxin" style="font-size:14px;margin-right:5px"></i>
					</Button>
				</div>
			</div>
        </header>
		<div class="list">
			<Table  :columns="columns" :data="dataSource"></Table>
		</div>
		<div class="page">
            <Page :total="count" :current='pageNo' :page-size="pageSize"  show-total show-elevator @on-change="onChange"/>
        </div>
    </div>
</template>

<script>
import api from "@/api/commonApi";
import { DatePicker } from "view-design";
import fourLevelLinkage from "@/components/fourLevelLinkage";
import tablePlus from "@/components/tablePlus";
import Utils from "@/utils";
import cookie from "../../../utils/cookie.js";
const filterObj = {
	time: null,
	name: null
};
export default {
	components: {
		tablePlus,
		fourLevelLinkage,
		DatePicker
	},
	props: {
		pageUrl: String,
		feedbackType: Number,
		ysjy: String,
	},
	data() {
		const that = this;
		return {
			province: null,
			city: null,
			area: null,
			hospital: null,
			pageNo: 1,
			pageSize: 10,
			count: 0,
			filterObj: { ...filterObj },
			dataSource: [],
			column1: [
				{ title: '排序', type: 'sum', width: 80, align: 'center',
					render: (h, params) => {
                        let sum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", sum);
                    }
				}, 
				{ title: '机构' , key: 'hospitalName', align: "center"},      
				{ title: '建议反馈内容', key: 'content', align: "center" },
				{ title: '建议时间', key: 'createTime', align: "center" },
				{ title: '建议人', key: 'nickName', align: "center" },
			],
			loading: false,
			typeList: [
                {typeName: '建议反馈',typeId: 1,},
                {typeName: '感谢信',typeId: 2,},
            ],
			agreeType:[
                { title: '排序', key: "sum", type: 'index', width: 80, align: 'center',
					render: (h, params) => {
                        let sum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", sum);
                    }
				},
                { title: '机构' , key: 'hospitalName', align: "center",width:250},
                { title: '科室' , key: 'deptName', align: "center",width:150},
                { title: '医生' , key: 'doctorName', align: "center",width:150},
                { title: '感谢信内容', key: 'content', align: "center"},
                { title: '建议时间', key: 'createTime', align: "center",width:180},
                { title: '建议人', key: 'nickName', align: "center",width:120},
            ],
			dictName: '',
            dictType: "",
            dictId: "",
            deptmentList:[],
            Name: "",
			identity:'',
		}
  	},
	mounted() {
		this.identity = cookie.getCookie("idtt");
		if(this.feedbackType == 1)  {
			this.columns = this.column1
		}
		if(this.ysjy== 1){
			this.columns = this.column1
		}
		this.queryPage(1);
	},
	methods: {
		//选择是否感谢信
        changefeedbackType() {
			this.dictId = null;
			this.Name = null;
            if(this.feedbackType == 2) {
                this.columns = this.agreeType               
            } 
			if(this.feedbackType == 1)  {
				this.columns = this.column1
			}
			this.queryPage(1)
        },
		changeProvince(val) {
			this.province = val;
		},
		changeCity(val) {
			this.city = val;
		},
		changeArea(val) {
			this.area = val;
		},
		changeHospital(val) {
			this.hospital = val;
			this.loadingDepartment()
		},
		// 页面查询的科室选择框
        loadingDepartment(){
            let url = api.querydeptname
            let params = {
                hospitalId : this.hospital
            }
            this.packageAxios(this,url,params,(res)=>{
                if(res.data.success) {
                    let ret = res.data.object;
                    this.deptmentList = ret;
					console.log('科室列表',this.deptmentList)
                } else {
                    this.$Message.error("加载失败")
                }
            })
        },
		handleSearch() {
			this.pageNo = 1;
			this.queryPage(1);
		},
		handleReset() {
			this.filterObj = { ...filterObj };	
			if(this.identity !=5){
				this.province = null;
				this.city = null;
				this.area = null;
				this.hospital = null;
			}		
			this.dictId = null;
			this.Name = null;
			this.pageNo = 1,
			this.pageSize = 10,
			this.queryPage(1);
		},
		onChange(index) {
			this.pageNo = index;
			this.queryPage(index);
		},
		queryPage(pageNo) {
			const reqBody = {
				...this.filterObj,
				pageNo,
				pageSize: this.pageSize,
				feedbackType:this.feedbackType
			};
			reqBody.provinceCode = this.province ? this.province : null;
			reqBody.cityCode = this.city ? this.city : null;
			reqBody.areaCode = this.area ? this.area : null;
			reqBody.hospitalId = this.hospital ? this.hospital : null;
			if(reqBody.time){
				reqBody.minDate = Utils.getNowDateBySpecialFormat(reqBody.time[0]);
				reqBody.maxDate = Utils.getNowDateBySpecialFormat(reqBody.time[1]);
			}
			if(this.dictId) {
				reqBody.deptId = this.dictId
			}
			if(this.Name) {
				reqBody.doctorName = this.Name
			}
			this.loading = true;
			this.$axios.post(this.pageUrl, reqBody).then(res => {
				if (res.data.code === 1) {
					const { records, total, pages } = res.data.object;
					this.count = total;
					if(records){
						this.dataSource = records;	
						this.dataSource.forEach(i =>{
							i.nickName = i.nickName ? i.nickName : i.doctorName
						})		
					} else {
						this.dataSource = []
					}						
				} else {
					this.$Message.error(res.data.message);
				}
				this.loading = false;
			});
		},
  	}
}
</script>

<style scoped lang="less">
.feedback{
	padding: 10px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
	.page {
        width: 100%;
        margin: 10px auto;
        text-align: center;
    }
}
.filter-part {	
	display: flex;
	flex-wrap: wrap;
	.filter-item {
		display: flex;
		margin: 10px 10px 10px 0;
		label {
			white-space: nowrap;
			line-height: 32px;
			padding-left: 5px;
			text-align: right;
		}
		.input {
			width: 220px;
		}
		.select {
			width: 70px;
		}
	}
	.filter-btn-group {
		margin: 10px 10px 10px 0;
		flex: 0 0 auto;
	}
}
</style>